<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
				<view class="flex-row flex-y-center" style="background-color:#fff;padding:0 24upx;border-bottom:1upx #eee solid;border-top:1upx #eee solid;height:90upx;" v-if="data.send_type==0">
            <view class="flex-grow-1 flex-x-center" style="height:100%;">
                <view @tap="getOffline" :class="['flex-y-center', data.offline==1?'active':'']" :data-city_id="address.city_id" data-index="1" style="height:100%;">快递配送
                    </view>
            </view>
            <view class="flex-grow-1 flex-x-center" style="height:100%;">
                <view @tap="getOffline" :class="['flex-y-center', data.offline==2?'active':'']" data-index="2" style="height:100%;">到店自提
                    </view>
            </view>
        </view>
        <block v-if="data.offline==1">
            <view style="height:16upx;"></view>
            <navigator class="user-address flex-col" url="/pages/address-picker/address-picker">
                <view class="user-address-top flex-grow-0 flex-row">
                    <image :src="data.__wxapp_img.pt.address_top.url"></image>
                </view>
                <block v-if="data.address">
                    <view class="address-center flex-row flex-y-center">
                        <view class="address-left flex-grow-1 flex-col">
                            <view class="address-userinfo flex-grow-0 flex-row">
                                <view class="address-username flex-grow-1">
                                    收货人：{{data.address.name}}
                                </view>
                                <view class="address-phone flex-grow-1">
                                    {{data.address.mobile}}
                                </view>
                            </view>
                            <view class="address-text flex-grow-1 flex-row">
                                收货地址：{{data.address.province}} {{data.address.city}} {{data.address.district}} {{data.address.detail}}
                            </view>
                        </view>
                        <view class="address-right flex-grow-0">
                            <image :src="data.__wxapp_img.share.right.url"></image>
                        </view>
                    </view>
                    <view class="user-address-bottom flex-grow-0 flex-row">
                        <image :src="data.__wxapp_img.pt.address_bottom.url"></image>
                    </view>
                </block>
                <view class="no-address flex-row" v-else>
                    <view class="flex-grow-0 address-icon">
                        <image :src="data.__wxapp_img.pt.address.url"></image>
                    </view>
                    <view class="flex-grow-1">
                        <view>请选择收货地址</view>
                    </view>
                    <view class="flex-grow-0 address-to-icon">
                        <image :src="data.__wxapp_img.dapp.jiantou_r.url"></image>
                    </view>
                </view>
            </navigator>
        </block>
        <block v-if="data.offline==2">
            <view class="flex-row address-picker">
                <view class="flex-grow-1">
                    <view class="flex-row" style="margin-bottom: 20upx">
                        <view class="flex-y-center">联系人：</view>
                        <view>
                            <input @input="KeyName" placeholder="可以手动填写" :value="data.name"></input>
                        </view>
                    </view>
                    <view class="flex-row">
                        <view class="flex-y-center">联系电话：</view>
                        <view>
                            <input @input="KeyMobile" placeholder="可以手动填写" :value="data.mobile"></input>
                        </view>
                    </view>
                </view>
            </view>
            <view :@tap="data.shop_list.length>=1?'showShop':''" class="flex-row address-picker">
                <view class="flex-grow-1">
                    <view class="flex-row" style="margin-bottom: 20upx">
                        <view class="flex-grow-1">门店名称：{{data.shop.name}}</view>
                    </view>
                    <view class="flex-row" style="margin-bottom: 20upx">
                        <view class="flex-grow-1">门店电话：{{data.shop.mobile}}</view>
                    </view>
                    <view>自提门店：{{data.shop.address}}</view>
                </view>
                <view class="flex-grow-0 flex-y-center" v-if="data.shop_list.length>=1">
                    <image :src="data.__wxapp_img.dapp.jiantou_r.url" style="width: 12upx;height: 22upx;margin-left: 12upx"></image>
                </view>
            </view>
        </block>
        <view class="flex-col " v-if="data.goods">
            <view class="cart-item flex-row">
                <view class="flex-grow-0">
                    <image class="goods-pic" mode="aspectFill" :src="data.goods.cover_pic"></image>
                </view>
                <view class="flex-grow-1 flex-col">
                    <view class="flex-grow-1">
                        <view class="goods-name">{{data.goods.name}}</view>
                        <view class="attr-list">
                            <view class="attr-item" v-for="(attr,i) in data.goods.attr" :key="attr.id">
                                {{attr.attr_group_name}}:{{attr.attr_name}}
                            </view>
                        </view>
                    </view>
                    <view class="flex-grow-0 flex-row">
                        <view class="flex-grow-0 price">{{attr_integral}}积分
                            <block v-if="data.total_price>0">+￥{{attr_price}}</block>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="colonel flex-row flex-y-center" v-if="data.offline!=2">
            <view class="colonel-title flex-grow-1">运费</view>
            <view class="colonel-price flex-grow-1">
                ¥：{{data.express_price}}
            </view>
        </view>
        <view class="colonel flex-row flex-y-center">
            <view class="message-title flex-grow-0 flex-y-center">买家留言</view>
            <view class="message flex-grow-1 flex-y-center">
                <input @input="bindkeyinput" class="flex-y-center" placeholder="你有什么想对商家说的都可以填写在这哦~" placeholderClass="message-plaseholder" style="width:100%;" type="text"></input>
            </view>
        </view>
        <form @submit="orderSubmit" reportSubmit="true">
            <view class="submit-footer flex-row flex-y-center">
                <view class="total-title flex-y-center flex-grow-0 ">
                    总计：
                </view>
                <view class="total-price flex-y-center flex-grow-1">
                    {{data.attr_integral}}积分+￥{{data.new_total_price}}
                </view>
                <button class="flex-y-center flex-grow-0 flex-x-center submit-btn" formType="submit">提交</button>
            </view>
        </form>
        <view class="coupon-picker" style="background-color:#f7f7f7;" v-if="data.show_shop">
            <scroll-view class="coupon-list" scrollY="true" style="height: 100%;padding:0;">
                <view class="shop-block flex-y-center">当前地址</view>
                <view class="shop-address flex-row flex-y-center">
                    <view class="flex-grow-1">{{data.location}}</view>
                    <view @tap="dingwei" class="flex-grow-0 flex-y-center">
                        <image :src="data.__wxapp_img.shop.dingwei.url" style="width:32upx;height:32upx;margin-right:2upx;"></image>
                        <text style="color:#2495ff">手动定位</text>
                    </view>
                </view>
                <view class="shop-block flex-y-center">门店列表（仅展示离您最近的30家门店）</view>
                <view @tap="pickShop" class="flex-row address-picker" :data-index="index" style="margin:0;" v-for="(item,index) in data.shop_list" :key="item.id">
                    <view class="flex-grow-0 flex-y-center">
                        <image :src="item.id==data.shop.id?'/static/images/icon-shop-checked.png':'/static/images/icon-shop-un.png'" style="width: 40upx;height: 40upx;margin-right: 20upx"></image>
                    </view>
                    <view class="flex-grow-1">
                        <view class="flex-row" style="margin-bottom: 20upx">
                            <view class="flex-grow-1" style="font-weight:bold;" :style="item.id==data.shop.id?'color:#ff4544':''">
                                {{item.name}}
                            </view>
                            <view class="flex-grow-0" v-if="item.distance!=-1">{{item.distance}}</view>
                        </view>
                        <view class="flex-row" style="margin-bottom: 20upx">
                            <view class="flex-grow-1">电话：{{item.mobile}}</view>
                        </view>
                        <view>地址：{{item.address}}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = "", e = "";
	export default {
		data() {
			return {
				data: {
        address: null,
        offline: 1,
        payment: -1,
        show_payment: !1
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this, a = t.goods_info, o = JSON.parse(a);
        o && e.setData({
            goods_info: o,
            offline: 1,
            id: o.goods_id
        });
    },
    onReady: function() {},
    onShow: function() {
			var _this = this;
        myVue.getApp.page.onShow(this), myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        });
        var t = this, e = myVue.getApp.core.getStorageSync(myVue.getApp.const.PICKER_ADDRESS);
        e && (t.setData({
            address: e,
            name: e.name,
            mobile: e.mobile
        }), myVue.getApp.core.removeStorageSync(myVue.getApp.const.PICKER_ADDRESS));
        a = "";
        if (t.data.address && t.data.address.id) var a = t.data.address.id;
        myVue.getApp.request({
            url: myVue.getApp.api.integral.submit_preview,
            data: {
                goods_info: JSON.stringify(t.data.goods_info),
                address_id: a
            },
            success: function(e) {
                if (myVue.getApp.core.hideLoading(), 0 == e.code) {
                    var a = e.data.shop_list, o = {};
                    a && 1 == a.length && (o = a[0]), e.data.is_shop && (o = e.data.is_shop);
                    var s = e.data.total_price;
                    if (e.data.express_price) i = e.data.express_price; else var i = 0;
                    var n = e.data.goods;
                    t.setData({
                        goods: n,
                        address: e.data.address,
                        express_price: i,
                        shop_list: e.data.shop_list,
                        shop: o,
                        name: e.data.address ? e.data.address.name : "",
                        mobile: e.data.address ? e.data.address.mobile : "",
                        total_price: parseFloat(s).toFixed(2),
                        send_type: e.data.send_type,
                        attr: n.attr,
                        attr_price: n.attr_price,
                        attr_integral: n.attr_integral
                    }), 1 == e.data.send_type && t.setData({
                        offline: 1
                    }), 2 == e.data.send_type && t.setData({
                        offline: 2
                    }), t.getTotalPrice();
                } else myVue.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    confirmText: "返回",
                    success: function(t) {
                        t.confirm && myVue.getApp.core.navigateBack({
                            delta: 1
                        });
                    }
                });
            }
        });
    },
    onHide: function() {},
    onUnload: function() {},
    onPullDownRefresh: function() {},
    onReachBottom: function() {},
		methods: {
			getOffline: function(t) {
        var e = this, a = (e.data.express_price, e.data.total_price);
        1 == t.currentTarget.dataset.index ? e.setData({
            offline: 1,
            total_price: a
        }) : e.setData({
            offline: 2
        }), e.getTotalPrice();
    },
    showShop: function(t) {
        var e = this;
        e.dingwei(), e.data.shop_list && e.data.shop_list.length >= 1 && e.setData({
            show_shop: !0
        });
    },
    dingwei: function() {
        var a = this;
        myVue.getApp.core.chooseLocation({
            success: function(o) {
                t = o.longitude, e = o.latitude, a.setData({
                    location: o.address
                });
            },
            fail: function(t) {
                myVue.getApp.getauth({
                    content: "需要获取您的地理位置授权，请到小程序设置中打开授权",
                    author: "scope.userLocation",
                    success: function(t) {
                        t && (t.authSetting["scope.userLocation"] ? a.dingwei() : myVue.getApp.core.showToast({
                            title: "您取消了授权",
                            image: "/static/images/icon-warning.png"
                        }));
                    }
                });
            }
        });
    },
    pickShop: function(t) {
        var e = this, a = t.currentTarget.dataset.index;
        "-1" == a || -1 == a ? e.setData({
            shop: !1,
            show_shop: !1
        }) : e.setData({
            shop: e.data.shop_list[a],
            show_shop: !1
        });
    },
    bindkeyinput: function(t) {
        this.setData({
            content: t.detail.value
        });
    },
    KeyName: function(t) {
        this.setData({
            name: t.detail.value
        });
    },
    KeyMobile: function(t) {
        this.setData({
            mobile: t.detail.value
        });
    },
    orderSubmit: function(t) {
        var e = this, a = e.data.offline, o = {};
        if (1 == a) {
            if (!e.data.address || !e.data.address.id) return void myVue.getApp.core.showToast({
                title: "请选择收货地址",
                image: "/static/images/icon-warning.png"
            });
            if (o.address_id = e.data.address.id, e.data.total_price) {
                if (e.data.total_price > 0) s = 2; else var s = 1;
                o.type = s;
            }
        } else {
            if (o.address_name = e.data.name, o.address_mobile = e.data.mobile, !e.data.shop.id) return void myVue.getApp.core.showModal({
                title: "警告",
                content: "请选择门店",
                showCancel: !1
            });
            if (o.shop_id = e.data.shop.id, !o.address_name || void 0 == o.address_name) return void e.showToast({
                title: "请填写收货人",
                image: "/static/images/icon-warning.png"
            });
            if (!o.address_mobile || void 0 == o.address_mobile) return void e.showToast({
                title: "请填写联系方式",
                image: "/static/images/icon-warning.png"
            });
        }
        if (o.offline = a, e.data.content && (o.content = e.data.content), e.data.goods_info) {
            var i = e.data.attr, n = [];
            for (var r in i) {
                var d = {
                    attr_id: i[r].attr_id,
                    attr_name: i[r].attr_name
                };
                n.push(d);
            }
            e.data.goods_info.attr = n, o.goods_info = JSON.stringify(e.data.goods_info);
        }
        e.data.express_price && (o.express_price = e.data.express_price), o.attr = JSON.stringify(i), 
        myVue.getApp.core.showLoading({
            title: "提交中",
            mask: !0
        }), o.formId = t.detail.formId, myVue.getApp.request({
            url: myVue.getApp.api.integral.submit,
            method: "post",
            data: o,
            success: function(t) {
                e.getApp.core.hideLoading(), 0 == t.code ? 1 == t.type ? e.getApp.core.redirectTo({
                    url: "/pages/integral-mall/order/order?status=1"
                }) : e.getApp.core.requestPayment({
                    _res: t,
                    timeStamp: t.data.timeStamp,
                    nonceStr: t.data.nonceStr,
                    package: t.data.package,
                    signType: t.data.signType,
                    paySign: t.data.paySign,
                    complete: function(t) {
                        "requestPayment:fail" != t.errMsg && "requestPayment:fail cancel" != t.errMsg ? "requestPayment:ok" == t.errMsg && e.getApp.core.redirectTo({
                            url: "/pages/integral-mall/order/order?status=1"
                        }) : e.getApp.core.showModal({
                            title: "提示",
                            content: "订单尚未支付",
                            showCancel: !1,
                            confirmText: "确认",
                            success: function(t) {
                                t.confirm && e.getApp.core.redirectTo({
                                    url: "/pages/integral-mall/order/order?status=0"
                                });
                            }
                        });
                    }
                }) : e.getApp.core.showToast({
                    title: t.msg,
                    image: "/static/images/icon-warning.png"
                });
            }
        });
    },
    getTotalPrice: function() {
        var t = this, e = parseFloat(t.data.total_price), a = t.data.offline, o = t.data.express_price, s = 0;
        s = 2 == a ? e : e + o, t.setData({
            new_total_price: parseFloat(s).toFixed(2)
        });
    }
		},
	}
</script>

<style scoped>
.user-address {
    background-color: #ffffff;
    margin-bottom: 20upx;
}

.user-address-top image {
    height: 8upx;
    width: 100%;
}

.user-address-bottom image {
    height: 8upx;
    width: 100%;
}

.address-center {
    padding: 32upx 24upx;
    font-size: 11pt;
    color: #353535;
}

.address-right image {
    width: 16upx;
    height: 26upx;
    margin-left: 46upx;
}

.address-phone {
    text-align: right;
}

.address-text {
    margin-top: 28upx;
}

.no-address {
    color: #353535;
    font-size: 11pt;
    padding: 16upx 24upx;
}

.address-icon image {
    width: 34upx;
    height: 42upx;
    margin-right: 14upx;
}

.address-to-icon image {
    width: 12upx;
    height: 22upx;
}

.cart-item {
    background: #fff;
    padding: 32upx 24upx 10upx 24upx;
}

.cart-item .goods-pic {
    width: 156upx;
    height: 156upx;
    margin-right: 20upx;
}

.cart-item .goods-name {
    margin-bottom: 10upx;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-item .attr-list,.cart-item .num {
    font-size: 9pt;
}

.cart-item .attr-list .attr-item {
    display: inline-block;
    margin-right: 36upx;
}

.cart-item .attr-list .attr-item:last-child {
    margin-right: 0;
}

.colonel {
    height: 88upx;
    background-color: #ffffff;
    border-top: 1upx solid #e2e2e2;
    padding: 0 24upx;
    font-size: 11pt;
    color: #353535;
}

.colonel-price {
    text-align: right;
}

.message-title {
    width: 168upx;
}

.message-plaseholder {
    font-size: 9pt;
}

.message input {
    font-size: 11pt;
    line-height: 1;
}

.submit-footer {
    height: 98upx;
    background-color: #ffffff;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-left: 24upx;
    font-size: 12pt;
}

.total-title {
    color: #353535;
}

.total-price {
    color: #ff5c5c;
    line-height: 1;
}

.submit-btn {
    background-color: #ff4544;
    color: #fff;
    width: 250upx;
    text-align: center;
    margin: 0;
    padding: 0;
    border-radius: 0;
    height: 100%;
}

.active {
    border-bottom: 4upx #ff4544 solid;
    color: #ff4544;
}

.address-picker {
    background: #fff;
    padding: 32upx 24upx;
    margin-bottom: 20upx;
    border-bottom: 1upx solid #e3e3e3;
}

.coupon-picker {
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    background: #fff;
    border-top: 1upx solid #e3e3e3;
}

.coupon-list {
    padding: 34upx;
}

.coupon-list .coupon-item {
    height: 152upx;
    width: 682upx;
    position: relative;
    margin-bottom: 24upx;
}

.coupon-list .coupon-item.coupon-status-1 .coupon-right,.coupon-list .coupon-item.coupon-status-2 .coupon-right {
    color: rgba(0,0,0,0.35)!important;
}

.coupon-list .coupon-item .coupon-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.coupon-list .coupon-item .coupon-status-icon {
    width: 140upx;
    height: 98upx;
    position: absolute;
    top: 0;
    right: 8upx;
    z-index: 1;
}

.coupon-list .coupon-item .coupon-left {
    color: #fff;
    width: 202upx;
}

.coupon-list .coupon-item .coupon-right {
    padding: 20upx 10upx;
}

.shop-block {
    width: 100%;
    height: 70upx;
    padding-left: 24upx;
}

.shop-address {
    width: 100%;
    background-color: #fff;
    padding: 30upx 24upx;
}

.payment {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    bottom: var(--window-bottom);
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
}

.pay-modal {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
}

.pay-head {
    height: 80upx;
    width: 100%;
    color: #353535;
    border-bottom: 1upx #e2e2e2 solid;
}

.pay-block {
    width: 100%;
    height: 120upx;
    color: #999;
    padding: 0 30upx;
    border-bottom: 1upx #e2e2e2 solid;
}

.red {
    color: #ff4544;
}

.pay-footer {
    width: 100%;
    height: 88upx;
    background-color: #ff4544;
    color: #fff;
}
</style>
